<template>
    <div class="common-layout">
        <el-container>

            <el-main>
                <el-scrollbar max-height="600px" style="height: 600px">
                    <div class="chat-item">
                        <div v-for="(message, index) in UMessages" :key="index" :class="message.type"
                             class="chat-item">
                            <img :src="message.type === 'user' ? '/src/assets/avatar.png' : '/src/assets/chatGPT.svg'"
                                 width="55px">
                            <span v-if="message.type === 'user'" class="user">我：</span>
                            <span v-else class="assistant">GPT：</span><br><br>
                            <div class="chatBg">
                    <span v-if="isBase64Audio(message.data)" class="audio">
                      <audio controls><source :src="getAudioURL(message.data)" type="audio/mp3"></audio>
                    </span>
                                <el-image v-else-if="isImage(message.data)" :hide-on-click-modal="true"
                                          :initial-index="0" :preview-src-list="[message.data]"
                                          :src="message.data"
                                          fit="fill" z-index="99999"/>
                                <span v-for="(char,index) in message.data"
                                      v-else-if="message.type === 'assistantResponse'" :key="index">
                    {{ char }}
                  </span>
                                <span v-else>
                    {{ message.data }}
                  </span>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </el-main>
            <el-footer class="footer-center">
                <el-input
                        ref="inputRef"
                        v-model="textarea"
                        placeholder="Please input"
                        show-word-limit
                        style="width: 500px;"
                        type="textarea"
                />

                <el-button
                        v-for="button in buttons"
                        :key="button.text"
                        :type="button.type"
                        bg
                        class="button-with-bg"
                        text
                        @click="paperSubmit"
                >
                    {{ button.text }}
                </el-button>
            </el-footer>
        </el-container>
    </div>
</template>
<script setup>
import {ref} from 'vue'
import {paperSubmit} from '@/api/user.js'

const textarea = ref('') // 初始化textarea的值

const buttons = [

    {type: 'info', text: ''},

]

const count = ref(3)

const add = () => {
    count.value++
}
const onDelete = () => {
    if (count.value > 0) {
        count.value--
    }
}
// 异步函数来处理fetch请求

</script>

<style lang="scss" scoped>
.footer-center {
  display: flex;
  justify-content: center;


  gap: 10px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

el-main {
  height: 400px;
}

el-container {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

}

.form-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: flex-end; /* 子元素垂直居底 */
  justify-content: center;
}

.button-with-bg {
  background-image: url('@/assets/icons_submit.svg'); /* 替换为你的图片路径 */
  background-size: cover; /* 调整图片覆盖整个按钮 */
  background-repeat: no-repeat; /* 防止图片重复 */
  color: #fff; /* 设置按钮的文字颜色 */
}

</style>